import { createRouter, createWebHistory } from "vue-router";
import type { RouteRecordRaw } from "vue-router";
import NProgress from "nprogress";
import "nprogress/nprogress.css";
import { usePermissStore } from "@/stores/permissStore.ts";
import Home from "@/views/TheRoot.vue";

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/login",
    name: "login",
    meta: {
      title: "登录",
      noAuth: true,
    },
    component: () => import("@/views/LoginView/LoginView.vue"),
  },
  {
    path: "/register",
    name: "register",
    meta: {
      title: "注册",
      noAuth: true,
    },
    component: () => import("@/views/General/RegisterView/RegisterView.vue"),
  },
  {
    path: "/home",
    name: "home",
    meta: {
      title: "主页",
      noAuth: true,
    },
    component: Home,
    redirect: "/homepage",
    children: [
      {
        path: "/homepage",
        name: "homepage",
        meta: {
          title: "首页",
          noAuth: true,
        },
        component: () => import("@/views/PublicPage/HomePage/HomePage.vue"),
      },
      {
        path: "/chat",
        name: "chat",
        meta: {
          title: "聊天",
          permiss: "12",
        },
        component: () => import("@/views/PublicPage/ChatPage/ChatPage.vue"),
      },
      {
        path: "/recreation",
        name: "recreation",
        meta: {
          title: "娱乐",
          permiss: "13",
        },
        component: () => import("@/views/PublicPage/Recreation/Recreation.vue"),
      },
      {
        path: "/aiChat",
        name: "aiChat",
        meta: {
          title: "AI聊天",
          permiss: "14",
        },
        component: () => import("@/views/PublicPage/AiChatPage/AiChatPage.vue"),
      },
    ],
  },
  {
    path: "/scanQR",
    name: "scanQR",
    meta: {
      title: "扫码",
      permiss: "15",
    },
    component: () => import("@/views/General/Works/ScanQR.vue"),
  },
  {
    path: "/attendance",
    name: "attendance",
    meta: {
      title: "考勤",
      permiss: "16",
    },
    component: () => import("@/views/General/Works/Attendance.vue"),
  },
  {
    path: "/report",
    name: "report",
    meta: {
      title: "举报",
      permiss: "17",
    },
    component: () => import("@/views/General/Works/Report.vue"),
  },
  {
    path: "/salaryAdministration",
    name: "salaryAdministration",
    meta: {
      title: "薪酬管理",
      permiss: "21",
    },
    component: () => import("@/views/Admin/Works/SalaryAdministration.vue"),
  },
  {
    path: "/personnelManagement",
    name: "personnelManagement",
    meta: {
      title: "人员管理",
      permiss: "22",
    },
    component: () => import("@/views/Admin/Works/PersonnelManagement.vue"),
  },
  {
    path: "/404",
    name: "404",
    meta: {
      title: "404",
    },
    component: () => import("@/views/404.vue"),
  },
  {
    path: "/403",
    name: "403",
    meta: {
      title: "403",
    },
    component: () => import("@/views/403.vue"),
  },
  {
    path: "/:path(.*)",
    redirect: "/404",
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 路由守卫
router.beforeEach((to, from, next) => {
  const permissStore = usePermissStore();
  // 开启进度条
  NProgress.start();
  // 判断是否登录
  const role = localStorage.getItem("userInfo");
  // 鉴权 分角色 403
  if (to.meta.title) {
    document.title = to.meta.title as string;
  }
  //  未登录访问无权限 登录访问无权限 无需校验
  //  未登录访问权限 登录访问有权限 检验判断

  // 需要登录的路由
  if (!role && to.meta.noAuth !== true) {
    // 未登录访问需要权限的页面
    console.log("----------------------");
    next("/login");
  } else if (
    // 检验是否有permiss ，判断是否有权限
    typeof to.meta.permiss == "string" &&
    !permissStore.key.includes(to.meta.permiss)
  ) {
    next("/403");
  } else {
    // 未登录且不需要登录,要鉴权有权限
    next();
  }
});

// 钩子函数 路由导航完成后执行
router.afterEach(() => {
  // 进度条结束
  NProgress.done();
});

export default router;
